<script setup>
import { ref } from "vue";
import { getMine } from "@/api/user";
import { getStorage, removeStorage } from "@/utils/local";
import { sitePhone } from "@/config/settings";

const router = useRouter();
const list = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/icon/record-icon.png",
		title: "诊疗记录",
		path: "/basic/treat",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/icon/medical-icon.png",
		title: "就诊人管理",
		path: "/basic/patients",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/icon/regard-icon.png",
		title: "关于叮咚依生",
		path: "/basic/protocol",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/static/icon/customer-icon.png",
		title: "联系客服",
		phone: sitePhone,
	},
]);
const mineData = ref({});
const getMineData = async () => {
	const { code, data } = await getMine({
		wchatUserId: getStorage("info")?.wchatUserId,
	});
	if (code === "0000") {
		mineData.value = data;
	}
};
getMineData();

const playphone = ref(null);
const onItem = (val) => {
	if (val.phone) {
		playphone.value[0].click();
	} else {
		router.push(val.path);
	}
};

// 退出登录
const onLogout = () => {
	console.log("退出登录");
	removeStorage("info");
	router.go(0);
};
</script>
<template>
	<div class="relative h-[220px] w-full bg-gradient-to-r from-[#4c7eef] to-[#739dfc]">
		<div class="relative h-full overflow-y-hidden">
			<p
				class="absolute right-0 top-[-30px] h-[190px] w-[180px] rounded-full bg-gradient-to-r from-[#6994f7] to-[#82a7fb]"
			></p>
			<p
				class="absolute bottom-[-80px] right-[50px] h-[190px] w-[180px] rounded-full bg-gradient-to-r from-[#6994f7] to-[#82a7fb]"
			></p>
		</div>
		<div class="absolute left-[20px] top-[30px] flex items-center">
			<van-image width="17.1vw" height="17.1vw" round :src="mineData.wchatPortrait" />

			<span class="ml-[20px] text-[18px] text-[#ffffff]">{{ mineData.wchatNickname }}</span>
		</div>
		<div
			class="absolute bottom-[-10px] left-0 right-0 mx-auto flex h-[80px] w-[350px] items-center justify-between rounded-[10px] bg-gradient-to-r from-[#ffc577] to-[#f5d2a0] p-[22px]"
		>
			<div class="font-[600]">
				我的押金&nbsp;&nbsp;|&nbsp;&nbsp;&yen;&nbsp;<span class="text-[16px]">{{
					mineData.userData?.depositAmount
				}}</span>
			</div>
			<div class="rounded-[10px] bg-[#ffeace] px-[8px] py-[2px]">退押金</div>
		</div>
	</div>
	<div class="bg-white pt-[30px]">
		<div class="flex items-center justify-between p-[10px]" v-for="item in list" :key="item.id" @click="onItem(item)">
			<div class="flex items-center">
				<img class="h-[30px] w-[30px]" :src="item.img" alt="" /><span class="ml-[10px] inline-block">{{
					item.title
				}}</span>
			</div>
			<a ref="playphone" v-if="item.phone" :href="item.phone"> </a>
			<van-icon name="arrow" />
		</div>
	</div>
	<div
		class="mx-auto mt-[20px] h-[40px] w-[350px] rounded-[10px] bg-[#5c8bf4] text-center leading-[40px] text-[#ffffff]"
		@click="onLogout"
	>
		退出登录
	</div>
</template>
